<template>
  <div id="payrollCardCollection">
    <div class="pageStatistics">
      <p class="companyName">
        <SubsidiarySelect @change="handleCompanyChange" />
      </p>
    </div>
    <div class="pageHead">
      <el-form ref="listQuery" :model="listQuery" class="listQuery">
        <el-form-item>
          <MultipleDepartments ref="departmentsSelect" :subId="listQuery.subId" />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="人员/工号" v-model="listQuery.usernamecode" />
        </el-form-item>
        <el-form-item>
          <div style="display:flex">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <MoreSearchPop ref="moreSearch" :visible.sync="isShowMoreSearch" :formProps="[{ label: '岗位', prop: 'workname' }, { label: '员工类型', prop: 'usertype' }]" />
          </div>
        </el-form-item>
        <el-form-item style="float: right;text-align: right; width:auto; margin:0;">
          <el-button type="primary"  :loading="isConfirmLoading" @click="handleImport">导入</el-button>
          <!-- <el-button type="primary"  :loading="isConfirmLoading" @click="handleExport">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table :data="tableData" style="width: 100%;" height="100%" v-loading='tableLoading' size='medium' class="pageInnerTable">
          <!-- <el-table-column type="selection" /> -->
          <el-table-column align="left" prop="username" label="姓名" />
          <el-table-column align="left" prop="worknumber" label="工号" />
          <el-table-column align="left" prop="cardrtype" label="证件类型" />
          <el-table-column align="left" prop="cardnumber" label="证件号码" width="155px" />
          <el-table-column align="left" prop="departname" label="部门" />
          <el-table-column align="left" prop="workname" label="岗位" />
          <el-table-column align="left" prop="openbanksname" label="开户银行" />
          <el-table-column align="left" prop="banksnumber" label="银行卡号" />
          <el-table-column align="left" prop="openbanksdetial" label="开户行" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :small="true" background @size-change="(value) => handleSearchChange(value,'PageSize')" @current-change="(value) => handleSearchChange(value,'PageIndex')" :current-page="listQuery.PageIndex" :page-sizes=[10,20,50] :page-size="listQuery.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagingChild">
      </el-pagination>
    </div>
    <EditPayrollCardInfo :visible.sync="isShowEdit" :activeData="activeData" @search="searchDataList" :subId ="listQuery.subId"/>
    <BatchImportPayrollCard :visible.sync="isShowImport" @search="searchDataList" />
  </div>
</template>
<script>
import EditPayrollCardInfo from "@/views/personnelRegulate/rewardManagement/payrollCredit/components/EditPayrollCardInfo.vue";
import MoreSearchPop from '@/views/personnelRegulate/rewardManagement/components/MoreSearchPop.vue';
import SubsidiarySelect from "@/views/personnelRegulate/rewardManagement/components/SubsidiarySelect.vue";
import MultipleDepartments from "@/views/personnelRegulate/rewardManagement/components/MultipleDepartments.vue";
import BatchImportPayrollCard from "@/views/personnelRegulate/rewardManagement/payrollCredit/components/BatchImportPayrollCard.vue";
import { getDepartmentView } from "@/util/xc/utils.js";
export default {
  name: 'payrollCardCollection',
  components: {
    EditPayrollCardInfo,
    MoreSearchPop,
    MultipleDepartments,
    SubsidiarySelect,
    BatchImportPayrollCard
  },
  data() {
    return {
      listQuery: {
        usernamecode: '', // 人员、工号
        workname: '', // 职位
        usertype: '', // 员工类型
        subId: '', // 子公司id
        PageSize: 10, // 条数
        PageIndex: 1 // 页数
      },
      activeDeptList: [],
      isConfirmLoading: false,
      tableData: [],
      total: 0,
      tableLoading: false,
      isShowEdit: false, //控制编辑弹窗显示
      isShowMoreSearch: false, // 控制更多搜索条件显示
      isShowImport: false, // 控制导入弹窗显示
      activeData: {},
      departmentList: [],
    };
  },
  methods: {

    /**
     * @description 获取工资卡收集列表数据
     */
    searchDataList() {
      let params = "";
      for (const key in this.listQuery) {
        if (Object.hasOwnProperty.call(this.listQuery, key)) {
          const element = this.listQuery[key];
          if (element && `${element}`.length > 0) {
            if (params.length == 0) {
              params += `?${key}=${element}`;
            } else {
              params += `&${key}=${element}`;
            }
          }
        }
      }
      this.tableLoading = true;
      this.$api.payrollCredit
        .GetPayrollCardView(params, this.activeDeptList)
        .then(res => {
          console.log(res);
          this.tableData = res.data.data.items;
          this.total = res.data.data.totalCount;
        })
        .finally(() => {
          this.tableLoading = false;
        });

    },
    async getDepartmentList() {
      const list = await getDepartmentView();
      this.departmentList = list.data.map(e => {
        return {
          departmentName: e.departmentName,
          departmentid: e.departmentid
        };
      });
    },
    handleSearch() {
      this.listQuery.PageIndex = 1;
      const { workname, usertype } = this.$refs.moreSearch.getFormData();
      this.listQuery.workname = workname;
      this.listQuery.usertype = usertype;
      // 关闭关闭更多选框
      this.isShowMoreSearch = false;

      // 从部门多选组件获取部门id数组
      this.activeDeptList = this.$refs.departmentsSelect.getDepartments();
      // 查询数据
      this.searchDataList();
    },
    handleEdit(index) {
      this.activeData = this.tableData[index];
      this.isShowEdit = true;
    },
    handleImport() {
      this.isShowImport = true;
    },

    /**
     * @description 导出 暂不使用
     */
    handleExport() { },

    handleSearchChange(value, prop) {
      this.listQuery[prop] = value;
      this.searchDataList();
    },

    /**
     * @description 子公司下拉框值变化,进入页面后，先获取子公司id，在执行查询列表操作
     */
    handleCompanyChange(subId) {
      // console.log('subId修改----执行查询', subId);
      this.listQuery.subId = subId;
      this.searchDataList();
    },
  },
  mounted() {
    this.getDepartmentList();
  },
  activated() {
    if (this.listQuery.subId?.length) {
      this.searchDataList();
    }
  },
};
</script>
<style lang="less" scoped>
@import url('../less/common.less');
#payrollCardCollection {
  .pageStatistics {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    color: #666666;
    margin-bottom: 5px;
    .companyName {
      width: 200px;
    }
  }

  .pageMain {
    height: calc(100% - 90px)!important;
  }
  .tableContent {
    padding: 0;
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .listQuery {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>